'use client'

import { motion } from 'framer-motion'
import Image from 'next/image'

export default function Hero() {
  return (
    <div className="relative h-screen flex items-center justify-center overflow-hidden">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="text-center z-10"
      >
        <h1 className="text-6xl font-bold mb-4">Premium Mechanical Keyboards</h1>
        <p className="text-xl mb-8">Experience the perfect blend of style and functionality</p>
        <motion.button
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          className="bg-accent text-white px-8 py-3 rounded-full"
        >
          Explore Collection
        </motion.button>
      </motion.div>
      <div className="absolute inset-0 -z-10">
        <Image
          src="https://images.unsplash.com/photo-1601445638532-3c6f6c3aa1d6"
          alt="Hero background"
          fill
          className="object-cover opacity-50"
          priority
        />
      </div>
    </div>
  )
} 